<template>
  <Suspense>
    <RouterView></RouterView>
  </Suspense>
</template>

<script lang="ts" setup name="App">
import { RouterView } from 'vue-router';
import tool from './utils/tool.js';
import { genMixColor } from './utils/gen-color';
import themeSettings from './views/layout/layout';

// 判断是否设置黑夜主题
const app_dark = tool.data.get("APP_Dark")
if (app_dark) {
  document.documentElement.classList.add("dark")
}

// 主题配置存入
// 主题颜色设置
let color
if (tool.data.get("themeSetting")) {
  color = tool.data.get("themeSetting").themeColor
} else {
  tool.data.set("themeSetting", themeSettings)
  color = '#409eff'
}
// 设置css变量
function setStyleProperty(propName: string, value: string): void {
  document.documentElement.style.setProperty(propName, value);
}
function updateBrandExtendColorsVar(color: string, name: string) {
  // TODO:生成混合色
  const { DEFAULT, dark, light } = genMixColor(color);
  // 每种主题色由浅到深分为五个阶梯以供开发者使用。
  setStyleProperty(`--${name}-lighter-color`, light[5]);
  setStyleProperty(`--${name}-light-color`, light[3]);
  setStyleProperty(`--${name}-color`, DEFAULT);
  setStyleProperty(`--${name}-deep-color`, dark[2]);
  setStyleProperty(`--${name}-deeper-color`, dark[4]);
  // elementPlus主题色更新
  setStyleProperty(`--el-color-primary`, DEFAULT);
  setStyleProperty(`--el-color-primary-dark-2`, dark[2]);
  setStyleProperty(`--el-color-primary-light-3`, light[3]);
  setStyleProperty(`--el-color-primary-light-5`, light[5]);
  setStyleProperty(`--el-color-primary-light-7`, light[7]);
  setStyleProperty(`--el-color-primary-light-8`, light[8]);
  setStyleProperty(`--el-color-primary-light-9`, light[9]);
}


function updateElementExtendColorsVar(color: string, name: string) {
  // TODO:生成混合色
  const { DEFAULT, dark, light } = genMixColor(color);
  // elementPlus主题色更新
  setStyleProperty(`--el-color-${name}`, DEFAULT);
  setStyleProperty(`--el-color-${name}-dark-2`, dark[2]);
  setStyleProperty(`--el-color-${name}-light-3`, light[3]);
  setStyleProperty(`--el-color-${name}-light-5`, light[5]);
  setStyleProperty(`--el-color-${name}-light-7`, light[7]);
  setStyleProperty(`--el-color-${name}-light-8`, light[8]);
  setStyleProperty(`--el-color-${name}-light-9`, light[9]);
}
updateBrandExtendColorsVar(color, 'brand')
// 设置成功色等
updateElementExtendColorsVar(tool.data.get("themeSetting").themeColorSuccess, 'success')
updateElementExtendColorsVar(tool.data.get("themeSetting").themeColorWarning, 'warning')
updateElementExtendColorsVar(tool.data.get("themeSetting").themeColorError, 'error')

</script>

<style scoped></style>
